/* color palette - 现代蓝色主题 */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8fafc;
  --vt-c-white-mute: #f1f5f9;

  --vt-c-black: #0f172a;
  --vt-c-black-soft: #1e293b;
  --vt-c-black-mute: #334155;

  --vt-c-indigo: #3b82f6;
  --vt-c-indigo-soft: #60a5fa;
  --vt-c-indigo-dark: #1d4ed8;

  --vt-c-divider-light-1: rgba(59, 130, 246, 0.29);
  --vt-c-divider-light-2: rgba(59, 130, 246, 0.12);
  --vt-c-divider-dark-1: rgba(96, 165, 250, 0.65);
  --vt-c-divider-dark-2: rgba(96, 165, 250, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo-dark);
  --vt-c-text-light-2: rgba(51, 65, 85, 0.8);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(248, 250, 252, 0.8);
}

/* semantic color variables for this project */
:root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}